<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>电子书阅读 - 首页</title>
  <style>
    body { font-family: Arial, sans-serif; }
    .navbar { overflow: hidden; background-color: #333; }
    .navbar a { float: left; display: block; color: white; text-align: center; padding: 14px 20px; text-decoration: none; }
    .navbar a:hover { background-color: #ddd; color: black; }
    .container { width: 80%; margin: auto; text-align: center; }
    .carousel { position: relative; }
    .carousel img { width: 111.6px; display: none; height: 160px; text-align: center; }
    .feature { display: flex; justify-content: space-around; margin-top: 20px; }
    .feature-item { text-align: center; margin: 10px; }
    .book-list, .user-recommendations, .best-sellers, .news-updates, .social-media { margin-top: 20px; }
    .footer { background-color: #333; color: white; text-align: center; padding: 10px 0; position: absolute; bottom: 0; width: 100%; }
    .book-item img { width: 100px; height: auto; }
    .social-media a { margin: 0 10px; }
    .book-list, .user-recommendations, .best-sellers {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

.book-item {
  width: calc(33% - 10px); /* 减去的10px是为了抵消margin的间隙 */
  margin: 5px;
  text-align: center;
}

.book-item img {
  max-width: 100%;
  height: auto;
}
  </style>
</head>
<body>

  <div class="navbar">
    <a href="#register">我的</a>
    <a href="#home">首页</a>
    <a href="#books">书籍</a>
    <a href="#about">关于我们</a>
    <a href="#contact">联系我们</a>
  </div>

  <div class="carousel">
    <img src="./img copy/005.png" alt="电子书1">
    <img src="./img copy/006.png" alt="电子书2">
    <img src="./img copy/007.png" alt="电子书3">
    <!-- 更多图片 -->
  </div>

  <div class="container">
    <div class="feature">
      <div class="feature-item">
        <h2>随时随地阅读</h2>
        <p>无论何时何地，都可以享受阅读的乐趣。</p>
      </div>
      <div class="feature-item">
        <h2>海量图书资源</h2>
        <p>提供各种类型的书籍，满足您的阅读需求。</p>
      </div>
      <div class="feature-item">
        <h2>个性化推荐</h2>
        <p>根据您的阅读习惯，推荐您可能喜欢的书籍。</p>
      </div>
    </div>    

    <div class="book-list">
      <h2>最新推荐</h2>
      <div class="book-item">
        <img src="./img copy/008.png" alt="最新推荐书籍1">
        <p>书名：《剑来》</p>
      </div>
      <div class="book-item">
        <img src="./img copy/009.png" alt="最新推荐书籍2">
        <p>书名：《十宗罪》</p>
      </div>
      <!-- 更多书籍 -->
    </div>
    
    <div class="user-recommendations">
      <h2>用户推荐</h2>
      <div class="book-item">
        <img src="./img copy/010.png" alt="用户推荐书籍1">
        <p>书名：《解忧杂货店》</p>
        <p>评分：4.5星</p>
      </div>
      <div class="book-item">
        <img src="./img copy/011.png" alt="用户推荐书籍2">
        <p>书名：《百年孤独》</p>
        <p>评分：4.8星</p>
      </div>
      <!-- 更多书籍 -->
    </div>
    
    <div class="best-sellers">
      <h2>畅销书排行榜</h2>
      <ol>
        <li>《三体》</li>
        <li>《哈利·波特与魔法石》</li>
        <li>《追风筝的人》</li>
        <!-- 更多畅销书 -->
      </ol>
    </div>

    <div class="news-updates">
      <h2>新闻和更新</h2>
      <ul>
        <li>2024年最新上架：《未来简史》</li>
        <li>网站新增：夜间阅读模式</li>
        <!-- 更多新闻和更新 -->
      </ul>
    </div>

    <div class="social-media">
      <h2>关注我们</h2>
      <a href="https://twitter.com" target="_blank">Twitter</a>
      <a href="https://facebook.com" target="_blank">Facebook</a>
      <a href="https://instagram.com" target="_blank">Instagram</a>
      <!-- 更多社交媒体 -->
    </div>

    
  </div>

  <script>
    // 简单的轮播图脚本
    let slideIndex = 0;
    showSlides();

    function showSlides() {
      let slides = document.querySelectorAll('.carousel img');
      for (let i = 0; i < slides.length; i++) {
        slides[i].style.display = "none";
      }
      slideIndex++;
      if (slideIndex > slides.length) {slideIndex = 1}
      slides[slideIndex-1].style.display = "block";
      setTimeout(showSlides, 3000); // Change image every 3 seconds
    }
  </script>

</body>
</html>